<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="所属楼盘">
        <span>中州中央城邦</span>
      </el-form-item>
      <el-form-item label="选择业态">
        <el-select v-model="form.property_type_name" placeholder="请选择">
          <el-option label="住宅" value="1"></el-option>
          <el-option label="商铺" value="2"></el-option>
          <el-option label="写字楼" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="户型名称">
        <el-input
          v-model="form.house_name"
          style="width: 217px"
          placeholder="请输入户型名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="销售状态">
        <el-select v-model="form.sales_status" placeholder="请选择">
          <el-option label="待售" value="1"></el-option>
          <el-option label="在售" value="2"></el-option>
          <el-option label="售罄" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否主推">
        <el-radio-group v-model="form.whether_the_main_push">
          <el-radio label="是"></el-radio>
          <el-radio label="否"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="房屋居室">
        <el-input v-model="form.bedroom" style="width: 217px"></el-input>
      </el-form-item>
      <el-form-item label="房屋朝向">
        <el-input v-model="form.towards" style="width: 217px"></el-input>
      </el-form-item>
      <el-form-item label="房屋面积">
        <el-col :span="4">
          <el-form-item label="建筑面积">
            <el-input v-model="form.construction_area"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="套内面积">
            <el-input v-model="form.set_area"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="公摊面积">
            <el-input v-model="form.shared_area"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="不计价">
            <el-input v-model="form.non_valuable_area"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="用户印象">
        <el-input style="width: 217px" v-model="form.user_impression"></el-input>
      </el-form-item>
      <el-form-item label="户型图">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="样板间">
        <el-upload action="#" list-type="picture-card" :auto-upload="false">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        property_type_name: "",
        house_name: "",
        sales_status: "",
        whether_the_main_push: "",
        bedroom:'',
        towards:'',
        construction_area:'',
        set_area:'',
        shared_area:'',
        non_valuable_area:'',
        user_impression:'',
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
    onSubmit() {
      console.log(this.form);
      this.axios({
        url: "http://172.16.10.77:8080/rema/addUnitType",
        method: "post",
        data: {
          // 均价
          average_price: "",
          // 居室
          bedroom: this.form.bedroom,
          // 建筑面积
          construction_area: this.form.construction_area,
          // 户型图地址
          file: "",
          // 多张样板间图片
          files: "",
          // 户型图地址
          floor_plan: "",
          // 户型名称
          house_name: this.form.house_name,
          // 最低房源价
          lowest_listing_price: "",
          // 不计价面积
          non_valuable_area: this.form.non_valuable_area,
          // 价格变动日期
          price_change_date: "",
          // 价格描述
          price_description: "",
          price_id: "",
          // 状态
          price_status: "",
          // 专业点评
          professional_comments: "",
          // 业态id
          property_type_id: "",
          // 业态级别
          property_type_level: "",
          // 业态名称
          property_type_name: this.form.property_type_name,
          // 父物业态ID
          property_type_p_id: "",
          // 业态类型排序（正整数）
          property_type_sort: "",
          // 楼盘ID
          real_estate_id: 1,
          // 不通过理由
          reason_for_not_passing: "",
          // 销售状态
          sales_status: this.form.sales_status,
          // 样板间图片id
          sample_room_id: "",
          // 样板间名称
          sample_room_image_explanation:'',
          // 样板间图片路径
          sample_room_image_path:'',
          // 套内面积
          set_area:this.form.set_area,
          // 公摊面积
          shared_area:this.form.shared_area,
          // 是否删除
          status:'',
          // 朝向
          towards:this.form.towards,
          // 审核状态
          unit_status:'',
          // 楼盘业态id
          unit_type_id:'',
          // 用户印象
          user_impression:this.form.user_impression,
          // 是否主推
          whether_the_main_push:this.form.whether_the_main_push,
        },
      }).then(data=>{
        console.log(data);
      })
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>

<style>
</style>